<template>
  <PageWrapper>
    <n-card
      :bordered="false"
      :segmented="{
        content: true,
        footer: 'soft',
      }"
    >
      <template #header-extra> #header-extra </template>
      <n-h2 class="text-center">{{ info.title }}</n-h2>
      <n-divider />
      <!-- eslint-disable-next-line vue/no-v-html -->
      <div class="notice-content" v-html="info.content"></div>
      <template #footer>
        <div class="flex items-center">
          <n-text depth="3"><span depth="3">发送者：</span> {{ info.send_name }}</n-text>
          <n-divider vertical />
          <n-text depth="3"><span>发送时间：</span> {{ info.created_at }}</n-text>
          <n-divider vertical />
          <n-text depth="3"><span>类型：</span> {{ noticeTypeMsg[info.notice_type - 1] }}</n-text>
        </div>
      </template>
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.postId"
        ref="basicTableRef"
      />
    </n-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { h, ref, reactive, onMounted } from 'vue';
  import { noticeInfo, receiveList } from '@/api/notice/notice';
  import { BasicTable, BasicColumn } from '@/components/Table';
  import { useRoute } from 'vue-router';
  import { NTag } from 'naive-ui';

  const route = useRoute();
  const info = ref<any>({});
  const tableData = ref();
  const params = reactive({
    notice_id: route.params.id,
  });

  const noticeTypeMsg = ['公告', '会议', '其他'];

  const columns: BasicColumn[] = [
    {
      title: '接收者',
      key: 'receive_name',
    },
    {
      title: '阅读状态',
      key: 'is_read',
      render(row) {
        return h(
          NTag,
          {
            type: row.is_read ? 'success' : 'default',
          },
          {
            default: () => (row.is_read ? '已读' : '未读'),
          },
        );
      },
    },
    {
      title: '阅读时间',
      key: 'read_time',
    },
  ];

  const loadDataTable = async (res) => {
    const result = await receiveList({ ...params, ...res });
    tableData.value = result.list;
    return result;
  };

  function getInfo() {
    const id = route.params && route.params.id;
    noticeInfo({ notice_id: id }).then((res) => {
      info.value = res;
    });
  }

  onMounted(() => {
    getInfo();
  });
</script>
